<template>
  <div class="page-live-play-content">
    <div v-loading="loading" class="content-block">
      <div class="title-block" style="position: relative">
        <div class="title">{{ detail.roomName }}(直播回放)</div>
        <div class="source">{{ detail.realName }}</div>
        <!--        <div class="audience" style="position: absolute;right: 5px;bottom: 10px;display: flex;align-items: center"><div class="iconfont icon-yanjing" style="margin-right: 10px"></div>{{ audience }}人在看</div>-->
      </div>
      <div class="play-content">
        <VideoPlay
            v-if="detail.videoUrl"
            :videoUrl="detail.videoUrl"
            :width="1150"
            :height="500"
            :autoplay="true"
            :controls="true"
            :loop="false"
            :muted="false"
            preload="auto"
            :showPlay="true"
            :playWidth="96"
            zoom="cotain"
        />
      </div>
      <div class="info-block">
        <div class="info-tab">
          <div :class="tabIndex===1?'active':''" @click="tabIndex=1" class="tab-item">直播介绍
            <div class="bottom-line"></div>
          </div>
          <div :class="tabIndex===2?'active':''" @click="tabIndex=2" class="tab-item">热招职位
            <div class="bottom-line"></div>
          </div>
          <div :class="tabIndex===3?'active':''" @click="tabIndex=3" class="tab-item">热门公司
            <div class="bottom-line"></div>
          </div>
        </div>
        <div v-if="tabIndex===1" class="info-introduce info-content" style="white-space: pre-wrap">
          {{ detail.introduce }}
        </div>
        <div v-if="tabIndex===2" class="info-position info-content" v-loading="infoLoading">
          <template v-if="position.length">
              <router-link :key="item1.id" v-for="(item1,index) in position"
                           :to="{name:'positionDetail',query:{id:item1.id}}"
                           class="position-item">
                <div class="info-block">
                  <div class="info">
                    <div class="info-item">
                      <div class="position-name">{{ item1.jobTitle }}</div>
                      <div v-if="item1.salaryNegotiable==1" class="wage">面议</div>
                      <div v-else class="wage">{{ item1.minSalary }}-{{ item1.maxSalary }}元</div>
                    </div>
                    <div class="address-item">
                      <div class="position-address">{{ item1.jobAddress }}</div>
                      <div class="position-label-block" v-if="item1.enterprise.welfare&&item1.enterprise.welfare.split(',').length>0">
                        <div class="position-label-item" v-for="(item2) in item1.enterprise.welfare.split(',')">{{ item2 }}</div>
                      </div>
                      <div class="position-label-block" v-else>
                        <div class="position-label-item">面议</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="company-block">
                  <div class="company-photo">
                    <img :src="item1.enterprise.logoUrl" alt="" @error="imgError(index)">
                  </div>
                  <div class="company-info">
                    <div class="company-name">{{ item1.enterprise.enterpriseName }}</div>
                    <div class="company-other">{{ item1.enterprise.enterpriseIntroduction }}</div>
                  </div>
                </div>
              </router-link>
          </template>
          <el-empty v-else></el-empty>
        </div>
        <div v-if="tabIndex===3" class="info-position info-content" v-loading="infoLoading">
          <template v-if="company.length>0">
            <router-link :key="item.id" v-for="item in company" :to="{name:'company',query:{id:item.id,}}"
                         class="position-item">
              <div class="company-block" style="padding-top: 0">
                <div class="company-photo">
                  <img :src="item.logoUrl" alt="">
                </div>
                <div class="company-info">
                  <div class="company-name">{{ item.enterpriseName }}</div>
                  <div class="company-other">{{ item.enterpriseIntroduction }}</div>
                </div>
              </div>
            </router-link>
          </template>
          <el-empty v-else></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import VideoPlay from "@/components/Video/VideoPlay.vue";
import {getEndLiveApi} from "@/api/live";

export default {
  name: "EndLive",
  components: {
    VideoPlay
  },
  data() {
    return {
      roomNo: null,
      detail: {
        videoUrl:'',
      },
      loading: false,
      player: null,
      tabIndex: 1,
      infoLoading: false,
      company:[],
      position: [],
      audience: 0,
      socket: null,
      heartbeat: null,
    }
  },
  watch: {},
  methods: {
    getEndLive() {
      getEndLiveApi({roomNo: this.roomNo}).then((res) => {

        this.detail = res.model ?? {};
        this.company = res.companyList ?? [];
        this.position = res.publishList ?? [];
      }).catch(() => {
        this.loading = false;
        this.$message.error('加载失败')
      })
    },
    imgError(index){
      this.position[index].logoUrl=process.env.VUE_APP_COM_URL
    },
  },

  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getEndLive();

  },
}
</script>

<style lang="scss" scoped>
.page-live-play-content {
  min-height: $fullMinHeight;
  display: flex;
  flex-direction: column;
  align-items: center;

  .content-block {
    width: $contentWidth;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    margin: 20px;

    .title-block {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        font-size: 18px;
        font-weight: bold;
      }

      .source {
        font-size: 14px;
        margin: 10px 0;
        color: #545454;
      }
    }

    .play-content {
      #live-player {
        width: 100%;
        min-height: 520px;
      }

      .vjs-big-play-button {
        top: auto;
        left: auto;
      }
    }

    .info-block {
      .info-tab {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        margin: 20px 0;

        .tab-item {
          color: #999;
          margin-right: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .bottom-line {
            width: 25px;
            height: 4px;
            border-radius: 5px;
            margin-top: 3px;
          }
        }

        .tab-item.active {
          color: #000;

          .bottom-line {
            background: $orange;
          }
        }
      }

      .info-position {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .position-item {
          height: auto;
          width: calc((100% - 40px) / 3);
          padding: 20px;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 5px;
          cursor: pointer;
          margin-right: 20px;
          margin-bottom: 20px;
          box-shadow: 0 0 15px 0 #d8d8d8;

          .info-block {
            border-bottom: 1px solid $lightGray;
            display: flex;
            flex-direction: row;
            height: 60%;

            .info {
              width: 100%;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;

              .info-item {
                display: flex;
                flex-direction: row;

                .position-name {
                  font-size: 19px;
                  width: 220px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                .wage {
                  width: 180px;
                  color: $orange;
                  font-weight: bold;
                  font-size: 17px;
                  display: flex;
                  flex-direction: row;
                  flex-grow: 1;
                }
              }

              .address-item {
                display: flex;
                flex-direction: column;
                width: 100%;

                .position-address {
                  width: 100%;
                  font-size: 12px;
                  color: $darkGray;
                  margin: 15px 10px 15px 0;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .position-label-block {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  margin-bottom: 10px;

                  .position-label-item {
                    margin-right: 10px;
                    margin-bottom: 10px;
                    height: 25px;
                    color: $darkGray;
                    background: $lightGray;
                    padding: 4px 8px;
                    font-size: 13px;
                  }
                }
              }

            }
          }

          .company-block {
            display: flex;
            flex-direction: row;
            padding-top: 15px;
            align-items: center;

            .company-photo {
              width: 50px;
              height: 50px;
              border: 1px solid $lightGray;
              margin-right: 15px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .company-info {
              width: calc(100% - 65px);
              display: flex;
              flex-direction: column;
              justify-content: center;

              .company-name {
                font-size: 15px;
              }

              .company-other {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 12px;
                color: $darkGray;
                margin-top: 10px;
              }
            }
          }
        }

        .position-item.more {
          align-items: center;
          justify-content: center;
          font-size: 15px;

          .more {
            margin-top: 8px;
            font-size: 14px;
            color: $orange;
            cursor: pointer;
          }
        }

        .position-item:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
